<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./../../WEB-INF/templates/fullLayoutTemplate.xhtml">
            
            <ui:define name="content">
                <h:outputStylesheet name="curtain.css" library="css"></h:outputStylesheet>
                <h:outputStylesheet name="newusers.css" library="css"></h:outputStylesheet>
                <h:outputScript target="head" name="curtain.js" library="javascript"></h:outputScript>
                <h:outputScript target="head" name="createCandidate.js" library="javascript"></h:outputScript>
                <h:form id="createCandidateForm">
                    <p:growl id="growlFile" showDetail="false" sticky="true" />
                    <ol class="curtains">
                        <li class="purpleBG"> 
                            <div class="machineTitle companyText">
                                <h:outputText value="#{messages.FindWhoever}" styleClass="title block"></h:outputText>
                                <h:outputText value="#{messages.FindWhoeverText}" styleClass="bodyText block justify"></h:outputText>
                            </div>
                            <h:outputText value="#{messages.KeybordScroll}" styleClass="companyText companyHelp justify"></h:outputText>
                            <div class="machineBG"></div>
                        </li>
                        <li class="navyBG">
                            <div class="umbrellaTitle companyText">
                                <h:outputText value="#{messages.MakeFasterSelections}" styleClass="title marginBottom20 block"></h:outputText>
                                <h:outputText value="#{messages.MakeFasterSelectionsText}" styleClass="bodyText block justify"></h:outputText>
                            </div>
                            
                            <div class="umbrellaBG"></div>
                        </li>
                        <li class="pigBG">
                            <h:outputText value="#{messages.SaveCosts}" styleClass="title loginTitle darkTitleText"></h:outputText>
                            <h:outputText value="#{messages.SaveCoststsText}" class="loginBody darkBodyText justify"></h:outputText>
                        
                            <p:panel styleClass="loginPanel">
                                
                                <h:panelGrid columns="1">  
                                    <p:inputText styleClass="loginInput" id="companyName" value="#{createCompanyBean.company.name}" required="true" requiredMessage="#{messages.CompanyNameRequired}" label="#{messages.CompanyName}">  
                                        <p:ajax event="change" update="growlFile" />
                                    </p:inputText>
                                    <p:watermark for="companyName" value="#{messages.CompanyName}" /> 

                                    <p:inputText styleClass="loginInput" id="email" value="#{createCompanyBean.company.idUser.email}" required="true" requiredMessage="#{messages.EmailRequired}" label="#{messages.Email}">  
                                        <f:validator  binding="#{emailValidator}"></f:validator>
                                        <p:ajax event="change" update="growlFile" />
                                    </p:inputText>  
                                    <p:watermark for="email" value="#{messages.Email}" /> 

                                    <p:password styleClass="loginInput" id="password" match="password2" feedback="true" value="#{createCompanyBean.company.idUser.password}" required="true" requiredMessage="#{messages.PasswordRequired}" label="#{messages.Password}">
                                        <f:validateLength minimum="5" maximum="30"></f:validateLength>
                                    </p:password>
                                    <p:watermark for="password" value="#{messages.Password}" />

                                    <p:password styleClass="loginInput" id="password2" feedback="true" value="#{createCompanyBean.company.idUser.password}" required="true" requiredMessage="#{messages.RepeatPasswordRequired}" label="#{messages.RepeatPassword}">
                                    </p:password>
                                    <p:watermark for="password2" value="#{messages.RepeatPassword}" />
                                    <p:commandButton styleClass="loginButton" value="#{messages.JoinIn}" update="growlFile" id="ajax" action="#{createCompanyBean.createCompany}" />                        
                                </h:panelGrid>
                                <h:outputText styleClass="contractText" value="#{messages.ContractAccept} "></h:outputText>
                                <p:commandLink styleClass="contractText" value="#{messages.UseTerms}" process="@this" action="UseTerms?faces-redirect=true"></p:commandLink>
                                <h:outputText styleClass="contractText" value="#{messages.And} "></h:outputText>
                                <p:commandLink styleClass="contractText" value="#{messages.PrivacyPolicy}" process="@this" action="Privacy?faces-redirect=true"></p:commandLink>
                            </p:panel>
                        </li>
                    </ol>
                    <script type="text/javascript">initNewCandidate()</script>
                </h:form>    
            </ui:define>

        </ui:composition>
    </body>
</html>
